<template>
  <div class="footer-box" :style="footerObj.style">
    <div class="footer-con">
      <div class="con1">
        <ul>
          <li>
            <router-link to="javascript:;" :style="{'color':footerObj.titColor}">新手指南</router-link>
            <router-link :to="{path:'/login',query:{'isLogin': 'first'}}" :style="{'color':footerObj.mostColor}">用户登录</router-link>
            <router-link :to="{path:'/login',query:{'isLogin': 'second'}}" :style="{'color':footerObj.mostColor}">用户注册</router-link>
          </li>
          <li>
            <router-link to="javascript:;" :style="{'color':footerObj.titColor}">品牌商服务</router-link>
            <router-link to="/vMain/allBrand" :style="{'color':footerObj.mostColor}">品牌大全</router-link>
            <router-link to="/vMain/join" :style="{'color':footerObj.mostColor}">品牌招商</router-link>
            <router-link to="/login" :style="{'color':footerObj.mostColor}">品牌推荐</router-link>
            <router-link to="/vMain/strength" :style="{'color':footerObj.mostColor}">品牌榜单</router-link>
          </li>
          <li>
            <router-link to="javascript:;" :style="{'color':footerObj.titColor}">新闻资讯</router-link>
            <router-link to="/login" :style="{'color':footerObj.mostColor}">行业资讯</router-link>
            <router-link to="/login" :style="{'color':footerObj.mostColor}">品牌资讯</router-link>
            <router-link to="/login" :style="{'color':footerObj.mostColor}">政策法规</router-link>
          </li>
        </ul>
        <div class="tels-box">
          <a href="javascript:;" :style="{'color':footerObj.titColor}">
            联系我们
          </a>
          <a href="javascript:;" :style="{'color':footerObj.mostColor}">
            <span>
              <i class="font_family icon-bot_rel_phone1" />
            </span>
            400-8966-666
          </a>
          <a href="javascript:;" :style="{'color':footerObj.mostColor}">
            <span>
              <i class="font_family icon-bot_rel_mail1" />
            </span>
            shanzhouwangluo@qq.com
          </a>
          <a href="javascript:;" :style="{'color':footerObj.mostColor}">
            <span>
              <i class="font_family icon-bot_rel_add1" />
            </span>
            河北省石家庄市长安区嘉和广场4号楼20层
          </a>
        </div>
      </div>

      <div class="friend">
        <div>
          <div class="friend-box">
            <router-link to="javascript:;" :style="{'color':footerObj.titColor}">友情链接</router-link>
            <a href="http://shanzhouweb.com" target="_blank" :style="{'color':footerObj.mostColor}">山舟网络官网</a>
            <a href="https://www.alibabagroup.com/cn/global/home" target="_blank" :style="{'color':footerObj.mostColor}">阿里巴巴集团</a>
            <a href="https://www.tencent.com/zh-cn/index.html" target="_blank" :style="{'color':footerObj.mostColor}">腾讯科技</a>
            <a href="http://www.baidu.com" target="_blank" :style="{'color':footerObj.mostColor}">百度搜索</a>
          </div>
          <a href="http://www.beian.gov.cn/portal/recordQuery?token=aaffd02f-b10c-4f7d-b02a-87c13b623e45" target="_blank" class="icp" :style="{'color':footerObj.mostColor}">京iCP备Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin</a>
        </div>
        <img :src="footerObj.logoImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    footerObj: {
      type: Object,
      required: true
    }
  },

  data() {
    return {

    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.footer-box{
  width:100%;
  min-width: 1200px;
  //background-image: url('../../assets/img/template-item2/footer/footer-bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  >.footer-con{
    width: 1200px;
    margin: 0 auto;
    padding-top: 33px;
    padding-bottom: 90px;
    >.con1{
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      border-bottom: 1px solid #fff;
      margin-bottom: 35px;
      height: 192px;
      >ul{
        width: 550px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        font-size: 16px;
        >li{
          width: 180px;
          >a{
            display: block;
            color:rgba(255,255,255,.6);
            -display: block;
            margin-bottom: 10px;
          }
          >a:first-child{
            font-size: 18px;
            margin-bottom: 18px;
            color: #fff;
            font-weight: bold;
            cursor: default;
          }
        }
      }
      >.tels-box{
        font-size: 16px;
        color:rgba(255,255,255,.6);
        >a{
          display: block;
          margin-bottom: 8px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          >span{
            display: block;
            width: 26px;
            height: 22px;
            padding-top: 2px;
            >i{
              font-size: 11px;
            }
          }
        }
        >a:first-child{
          color: #fff;
          margin-bottom: 14px;
        }
      }
    }
    >.friend{
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      color:rgba(255,255,255,.6);
      font-size: 16px;
      >div{
        width: 830px;
        >.friend-box{
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 19px;
          >a{
            margin-right: 26px;
          }
          >a:first-child{
            font-size: 18px;
          }
        }
        >a{
          font-size: 16px;
        }
      }
      >img{
        padding-right: 74px;
        display: block;
        max-height: 47px;
        max-width: 180px;
      }
    }
  }
}
</style>

